<template>
	<div class="tabbar">
		<img class="tabbar-icon" src="../static/img/tab.png" />
		<div class="tabbar-content">
			<div class="tabbar-cli" v-for="(item ,i) in tabbarList" :data-id='item.id' @click="tabbar(i,item.id,item.path)">
				<img :style="{width: item.width,height: item.height}" :src="item.img" />
				<span v-if="item.txt" :style="current==i?{color:'#000'}:''">{{item.txt}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				tabbarList: [{
					width: (25 / 375 * 100) + 'vw',
					height: (24 / 375 * 100) + 'vw',
					img: require('../static/img/icon0.png'),
					txt: '首页',
					id: 0,
					path: 'home'
				}, {
					width: (23 / 375 * 100) + 'vw',
					height: (23 / 375 * 100) + 'vw',
					img: require('../static/img/icon1.png'),
					txt: '广场',
					id: 1,
					path: 'square'
				}, {
					width: (47 / 375 * 100) + 'vw',
					height: (47 / 375 * 100) + 'vw',
					img: require('../static/img/cat.png'),
					txt: '',
					id: 2,
					path: ''
				}, {
					width: (23 / 375 * 100) + 'vw',
					height: (23 / 375 * 100) + 'vw',
					img: require('../static/img/icon2.png'),
					txt: '集邮册',
					id: 3,
					path: 'album'
				}, {
					width: (21 / 375 * 100) + 'vw',
					height: (21 / 375 * 100) + 'vw',
					img: require('../static/img/icon3.png'),
					txt: '我的',
					id: 4,
					path: 'personal'
				}]
			}
		},
		methods: {
			tabbar: function(index, id, path) {

				if (path == '') {
					alert("null")
				} else {
					if (this.$route.name == path) {

					} else {
						this.$router.push({
							name: path,
							query: {
								index: index,
								id: id
							}
						})
					}
				}


			}
		},
		mounted(option) {
			this.current = this.$route.query.index || 0
		}
	}
</script>

<style lang="scss">
	@import '../assets/scss/main.scss';

	.tabbar {
		position: fixed;
		width: 100%;
		bottom: 0px;
		left: 0px;
	}

	.tabbar-icon {
		width: 100%;
		height: auto;
		display: block;
	}

	.tabbar-content {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
		padding-top: px2vw(15);
		padding-left: px2vw(30);
		padding-right: px2vw(30);
		box-sizing: border-box;
	}

	.tabbar-cli {
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		align-items: center;
	}

	.tabbar-cli img {
		display: block;
	}

	.tabbar-cli span {
		display: block;
		font-size: px2vw(10);
		margin-top: px2vw(2);
		color: #778696;
	}
</style>
